<template>
  <div class="min">
    <div class="user"
         @click="handleLink('/user/settings')">
      <div class="user-images">
        <img :src="userInfo.avatar">
        <div class="user-info">
          <div class="userName">{{userInfo.user_nickname || userInfo.mobile}}</div>
          <div class="grade">{{$t('grade')}}：LV{{ userInfo.level_id}}</div>
        </div>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="user-assets" @click='goWellet'>
      <div class="myAssets">
        {{$t('myAssets')}}
        <van-icon name="eye"
                  v-if="!eye"
                  @click="eye = eye?false:true" />
        <van-icon name="closed-eye"
                  v-else
                  @click="eye = eye?false:true" />
      </div>
      <div class="USDT" v-fz>
        <van-icon name="ellipsis" v-if="eye" />
        <template v-else><span v-if="userInfo.usdt_balance">{{ userInfo.usdt_balance|numberFormat(4) }}</span> <span>USDT</span></template>
      </div>
      <div class="cny">
        <van-icon name="ellipsis"
                  v-if="eye" />
        <template v-else>≈<span v-if="userInfo.usdt_balance">{{ userInfo.usdt_balance * userInfo.cny_rate|numberFormat(4) }}</span> cny</template>
      </div>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item,index) in list"
            :key="index"
            @click="handleLink(item.url)">
          <div class="row">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </div>
          <van-icon name="arrow" />
        </li>
      </ul>
    </div>
    <activation-popup ref="cdkey" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import ActivationPopup from './activation/ActivationPopup'
import { format } from '@/utils/time'
import { BUY_PACKAGE, CHEKC_CDKEY } from '@/config/index'

export default {
  layout: 'navigation',
  i18n: {
    messages: {
      zh: {
        grade: "等级",
        myAssets: "我的资产",
        shareInvitation: "分享邀请",
        transactionRecords: "交易记录",
        communityForum: "社区论坛",
        accountSecurity: "账户安全",
        aboutUs: "关于我们",
        language: "选择语言",
        game: "游戏",
      },
      en: {
        grade: "Grade",
        myAssets: "My assets",
        shareInvitation: "Share invitation",
        transactionRecords: "Transaction records",
        communityForum: "Community Forum",
        accountSecurity: "Account security",
        aboutUs: "About us",
        language: "Choose language",
        game: "game",
      },
      jp: {
        grade: "レベル",
        myAssets: "私の資産",
        shareInvitation: "招待を分かち合う",
        transactionRecords: "取引記録",
        communityForum: "コミュニティフォーラム",
        accountSecurity: "アカウントのセキュリティ",
        aboutUs: "私たちについて",
        language: "言語を選択",
        game: "ゲーム",
      },
      kr: {
        grade: "등급",
        myAssets: "내 자산",
        shareInvitation: "초대장 공유",
        transactionRecords: "거래 기록",
        communityForum: "커뮤니티 포럼",
        accountSecurity: "계정 보안",
        aboutUs: "우리에 대해",
        language: "언어 선택",
        game: "게임",
      }
    }
  },
  components: {
    ActivationPopup
  },
  data () {
    return {
      BUY_PACKAGE,
      hasCDKey: CHEKC_CDKEY,
      activationCode: '',
      list: [{
        icon: "icon1",
        name: this.$t('shareInvitation'),
        url: "/user/invite/poster"
      },
      {
        icon: "icon2",
        name: this.$t('transactionRecords'),
        url: "/user/caleandar"
      }, {
        icon: "icon3",
        name: this.$t('communityForum'),
        url: "/user/invite"
      }, {
        icon: "icon4",
        name: this.$t('accountSecurity'),
        url: "/user/settings/save"
      }, {
        icon: "icon6",
        name: this.$t('language'),
        url: "/user/settings/changeLanguage"
      }, {
        icon: "icon5",
        name: this.$t('aboutUs'),
        url: ""
      }, {
        icon: "icon7",
        name: this.$t('game'),
        url: "/user/game"
      }],
      eye: false
    }
  },
  computed: {
    ...mapState({
      logged: ({ user }) => user.logged,
      userInfo: ({ user }) => user.userInfo,
      initInfo: index => index.initInfo,
      thirdLoginEnabled: ({ thirdLoginEnabled }) => thirdLoginEnabled
    })
  },
  async created () {
    if (localStorage.getItem('USER_TOKEN')) {
      await this.getUserInfo();
    }
  },
  methods: {
    ...mapActions({
      getUserInfo: 'user/getUserInfo'
    }),
    startCallBack () {
      this.$refs.LuckyWheel.play()
      setTimeout(() => {
        this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
      }, 1000)
    },
    format,
    handleLink (path) {
      if (this.logged) {
        if (path) {
          this.$router.push(path)
        } else {
          this.goHelp()
        }
      } else {
        this.$router.push('/sign/login')
      }
    },
    goAbout () {
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_user_agreement,
          title: '服务协议'
        }
      })
    },
    game () {
      this.$router.push('/user/game')
    },
    goWellet() {
      this.$router.push('/wallet/index3')
    },
    goHelp () {
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_customer_service,
          title: '联系我们'
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.min{
  position: absolute;
  left: 0;
  right: 0;
  min-height: 100%;
  background: #ffffff;
  padding: 13px 24px;
  line-height: 1;
  .user{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-images{
      display: flex;
      align-items: center;
      img{
        width: 57px;
        height: 57px;
        border-radius: 50%;
        border: 1px solid #FFFFFF;
      }
      .user-info{
        margin-left: 14px;
        .userName{
          font-size: 20px;
          font-weight: 500;
          color: #000000;
        }
        .grade{
          margin-top: 9px;
          display: inline-block;
          padding: 0 10px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 11px;
          font-weight: 400;
          color: #FFFFFF;
          background: linear-gradient(270deg, #DABF96 0%, #CDA76E 100%);
          border-radius: 10px;
        }
      }
    }
    .van-icon{
      font-size: 18px;
      color: #cecece;
    }
  }
  .user-assets{
    position: relative;
    margin-top: 14px;
    height: 162px;
    padding: 22px 19px 0 19px;
    background: linear-gradient(145deg, #67A2FF 0%, #3353F4 100%);
    border-radius: 28px;
    overflow: hidden;
    .myAssets{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 19px;
      font-weight: 400;
      color: #FFFFFF;
      .van-icon{
        float: right;
      }
    }
    .USDT{
      margin-top: 20px;
      font-size: 32px;
      font-weight: 300;
      color: #FFFFFF;
      span{
        margin-left: 8px;
        font-size: 20px;
        font-weight: 500;
      }
    }
    .cny{
      margin-top: 21px;
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
    }
    &:after{
      position: absolute;
      content: "";
      right: -20px;
      bottom: -80px;
      width: 140px;
      height: 140px;
      opacity: 0.18;
      border: 12px solid #ffffff;
      border-radius: 50%;
    }
  }
  .list{
    margin-top: 20px;
    padding-bottom: 56px;
    ul{
      li{
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        .row{
          display: flex;
          align-items: center;
          i{
            margin-right: 11px;
            display: inline-block;
            width: 28px;
            height: 28px;
            background-size: 28px 28px;
            background-repeat: no-repeat;
            &.icon1{
              background-image: url("./icon/icon1.png");
            }
            &.icon2{
              background-image: url("./icon/icon2.png");
            }
            &.icon3{
              background-image: url("./icon/icon3.png");
            }
            &.icon4{
              background-image: url("./icon/icon4.png");
            }
            &.icon5{
              background-image: url("./icon/icon5.png");
            }
            &.icon6{
              background-image: url("./icon/icon6.png");
            }
            &.icon7{
              background-image: url("./icon/icon7.png");
            }
          }
          span{
            font-size: 16px;
            font-weight: 500;
            color: #000000;
          }
        }
        .van-icon{
          font-size: 18px;
          color: #cecece;
        }
      }
    }
  }
}

</style>
